<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    li {
      list-style: none;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    .box {
      width: 600px;
      margin: 100px auto;
      position: relative;
    }

    .box .list {
      display: flex;
      background: rgba(0, 0, 0, 0.5);
      padding: 5px;
      border-radius: 20px;
      position: absolute;
      right: 20px;
      bottom: 10px;
      z-index: 999;
    }

    .box .list li {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background-color: #fff;
      margin: 0 5px;
      font-size: 0;
    }

    .box .list .active {
      background-color: #f00;
      color: #fff;
    }

    .box .list li+li {
      border-left: 0;
    }

    .tabBar {
      height: 400px;
      box-sizing: border-box;
    }

    .tabBar .part {
      height: 100%;
      text-align: center;
      line-height: 400px;
      border: 1px solid #333;
      position: absolute;
      top: 0;
      opacity: 0;
      transition: opacity 0.5s;
    }

    .tabBar .part img {
      width: 100%;
      height: 100%;
    }

    .tabBar .show {
      opacity: 1;
    }
  </style>
</head>

<body>
  <div class="box">
    <ul class="list">
      <li class="active">tab_01</li>
      <li>tab_02</li>
      <li>tab_03</li>
      <li>tab_04</li>
    </ul>
    <div class="tabBar">
      <div class="part show"><img src="../images/1.jpg" alt=""></div>
      <div class="part"><img src="../images/2.jpg" alt=""></div>
      <div class="part"><img src="../images/3.webp" alt=""></div>
      <div class="part"><img src="../images/4.webp" alt=""></div>
    </div>
  </div>
</body>
</body>
<script>
  var box = document.getElementsByClassName('box')[0];
  var list = document.getElementsByClassName("list")[0];
  var liList = list.getElementsByTagName('li');


  var partList = document.querySelectorAll('.tabBar .part')
  console.log(partList);
  var index = 0;
  var timer;

  fn();

  for (let i = 0; i < liList.length; i++) {
    let li = liList[i];
    // console.log(li);
    li.onclick = function () {
      // console.log(li, i);
      index = i;
      console.log(index);

      for (j = 0; j < liList.length; j++) {
        liList[j].className = '';
        partList[j].classList.remove('show');
      }

      liList[i].className = "active";
      partList[i].classList.add('show');

      clearInterval(timer);
    }
  }

  box.onmouseenter = function () {
    clearInterval(timer);
  }

  box.onmouseleave = function () {
    fn();
  }

  function fn() {
    timer = setInterval(function () {
      index++;
      if (index >= liList.length) {
        index = 0;
      }
      for (j = 0; j < liList.length; j++) {
        liList[j].className = '';
        partList[j].classList.remove('show');
      }

      liList[index].className = "active";
      partList[index].classList.add('show');
    }, 2000)
  }


</script>

</html>